<!-- <title>瑞众银保“五个一”功成--处总监日走访记录<title> -->
<style lang="less" scoped>
@import '@css/list.less';
</style>

<template>
  <div id="app">
    <van-sticky>
      <div class="title">日走访记录</div>
    </van-sticky>
    <div style="margin: 20px auto; text-align: center" v-if="getRecentThreeDaysRecords.length == 0">
      暂无数据
    </div>
    <van-collapse
      v-model="activeNames"
      @change="onchangecollapse"
      accordion
      v-for="(item, index) of getRecentThreeDaysRecords"
      :key="index"
    >
      <van-collapse-item :title="`对象：${item.target}`" :label="item.createDate" :name="index">
        <van-form @submit="onupdateYb51DirectorDailyRecord(index)" @failed="onFailed">
          <van-cell-group inset>
            <van-field
              :readonly="ShowUpdate != index"
              :class="{ backgroundRed: ShowUpdate == index }"
              class="fbox"
              v-model="item.target"
              :name="`target${index}`"
              label="走访对象"
              placeholder="支行/网点/理财"
              :rules="[{ required: true, message: '不能为空' }]"
            ></van-field>

            <van-field
              :readonly="ShowUpdate != index"
              :class="{ backgroundRed: ShowUpdate == index }"
              autosize
              type="textarea"
              class="fbox"
              v-model="item.content"
              :name="`content${index}`"
              label="沟通内容"
              placeholder="请填写参沟通内容"
              :rules="[{ required: true, message: '不能为空' }]"
            ></van-field>

            <van-field
              :readonly="ShowUpdate != index"
              :class="{ backgroundRed: ShowUpdate == index }"
              autosize
              type="textarea"
              class="fbox"
              v-model="item.feedback"
              :name="`feedback${index}`"
              label="沟通反馈"
              placeholder="请填写沟通反馈"
              :rules="[{ required: true, message: '不能为空' }]"
            ></van-field>

            <van-field :name="`uploader${index}`" label="图片">
              <template #input>
                <van-uploader
                  :deletable="false"
                  v-model="item.uploaderImgList"
                  :max-count="1"
                  :before-read="onbeforeRead"
                  :after-read="onafterRead"
                ></van-uploader>
              </template>
            </van-field>
          </van-cell-group>
          <div class="button" v-if="ShowUpdate != index">
            <van-button block type="primary" @click="onShowupdateYb51DirectorDailyRecord(index)"
              >更新</van-button
            >
          </div>
          <div class="button" v-if="ShowUpdate == index">
            <van-button
              block
              type="warning"
              style="width: 35%"
              @click="onCancelupdateYb51DirectorDailyRecord()"
              >取消更新</van-button
            >
            <van-button block type="primary" native-type="submit" style="width: 55%"
              >提交</van-button
            >
          </div>
        </van-form>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>
<script setup>
import {
  onBeforeMount,
  onMounted,
  onUnmounted,
  watch,
  computed,
  provide,
  inject,
  ref,
  reactive,
  nextTick,
  h
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const dayjs = inject('$dayjs')
const showPageLoading = inject('showPageLoading')
const hidePageLoading = inject('hidePageLoading')
const showAllNonBaseMenuItem = inject('showAllNonBaseMenuItem')
const hideAllNonBaseMenuItem = inject('hideAllNonBaseMenuItem')
import { isIOS, parseTime, handleFontSize } from '@/utils'
import {
  yb51_directors_daily_record_recentThreeDaysRecords,
  yb51_directors_daily_record_updateYb51DirectorsDailyRecord
} from '@/request/api.js'
onMounted(() => {
  agentcode = route.query.agentcode
  // agentcode = "zhujiahao"
  getrecentThreeDaysRecords()
})
let agentcode


const activeNames = ref(['1'])

import { compressImageToTargetSize } from '@/utils'
const targetSize = 1024 * 1024 * 1 // 1M大小
function onbeforeRead(file) {
  return new Promise((resolve, reject) => {
    console.log('压缩前文件大小:', file.size/(1024 * 1024), 'M')
    if (file.size < targetSize) {
      console.log('小于，不用压缩')
      resolve(file)
    } else {
      compressImageToTargetSize(file, targetSize).then((res) => {
        console.log('压缩后的文件大小:',res.size/(1024 * 1024), 'M')
        resolve(res)
      })
    }
  })
}
//文件读取后的回调函数
function onafterRead(file) {
  console.log('读取完毕')
}

function onchangecollapse() {
  onCancelupdateYb51DirectorDailyRecord()
}

//更新
const ShowUpdate = ref('no')
function onShowupdateYb51DirectorDailyRecord(index) {
  console.log(ShowUpdate.value)
  ShowUpdate.value = index
  console.log(ShowUpdate.value)
}
//取消更新
function onCancelupdateYb51DirectorDailyRecord() {
  getRecentThreeDaysRecords.value = getRecentThreeDaysRecordsBackup
    .slice()
    .map((item) => (typeof item === 'object' ? { ...item } : item))
  ShowUpdate.value = 'no'
}

//更新营业部总监日走访记录
function onupdateYb51DirectorDailyRecord(index) {
  showPageLoading()
  // const url = '/updateYb51DirectorsDailyRecord'
  const getRecentThreeDaysRecordsparams = getRecentThreeDaysRecords.value[index]
  // 删除键 fileUrl,不给更新图片
  delete getRecentThreeDaysRecordsparams.fileUrl
  const params = JSON.stringify(getRecentThreeDaysRecordsparams)
  yb51_directors_daily_record_updateYb51DirectorsDailyRecord(params).then((r) => {
    hidePageLoading()
    if (r.status == 200) {
      showNotify({ type: 'success', message: '更新成功' })
    } else {
      showNotify({ type: 'danger', message: '更新失败' })
    }
    getrecentThreeDaysRecords()
  })
}

function onFailed() {
  console.log('出错了')
}

//获取总监最近三天拜访记录列表
const getRecentThreeDaysRecords = ref([])
let getRecentThreeDaysRecordsBackup = []

function getrecentThreeDaysRecords() {
  showPageLoading()
  let params = new FormData()
  params.append('agentCode', agentcode)

  yb51_directors_daily_record_recentThreeDaysRecords(params).then((r) => {
    hidePageLoading()
    if (r.status == 200) {
      // agentcode:"zhujiahao"
      // createDate:"2023-06-27 09:48:18"
      // evaluation:"测试测试测试1"
      // fileUrl:"D:/UploadFile/yb51/20230627\\zhujiahao/银保承保清单.txt"
      // id:"1qfa5l16dc7b"
      // modifyDate:"2023-06-27 09:48:18"
      // target:"测试测试测试1"
      // tutorDate:"2023-06-19"
      // way:"测试测试测试1"
      getRecentThreeDaysRecords.value = r.data.map((item) => {
        item['uploaderImgList'] = [{ url: item.fileUrl }]
        return item
      })
      getRecentThreeDaysRecordsBackup = getRecentThreeDaysRecords.value
      ShowUpdate.value = 'no'
    } else {
      console.log('出错了，请重试')
      alert('出错了，请重试')
    }
  })
}
</script>
